<template>
  <section class="component case-record-chart">
    <common-title title="行动代码统计">

      <el-select slot="append" v-model="model.overduePeriod" placeholder="请选择" clearable @change="updateData">
        <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code"></el-option>
      </el-select>
    </common-title>

    <ve-pie height="450px" legend-position="bottom" :data="caseRecordChart.data" :settings="caseRecordChart.setting"></ve-pie>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { VePie } from "v-charts";
import { HomePageService } from '~/services/domain-service/home-page.service';
import CommonTitle from "~/components/common/common-title.vue";

@Component({
  components: {
    VePie,
    CommonTitle
  }
})
export default class CaseRecordChart extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private model: any = {
    overduePeriod: ''
  }

  private get initDataRows() {
    const followupBack: any = this.$dict.getDictData('FollowupBack')
    // console.log(followupBack,"followupBack")
    return followupBack.map(v => {
      return {
        actionName: v.name,
        actionCode: v.code,
        codeNum: 0
      }
    })
  }

  private caseRecordChart = {
    data: {
      columns: ['actionName', 'codeNum'],
      rows: this.initDataRows
    },
    setting: {
      offsetY: 170,
      radius:70,
      labelMap: {
        actionName: '行动代码名称',
        actionCode: '行动代码',
        codeNum: '代码数量',
      }
    }
  };

  private updateData() {
    const overduePeriod: number = this.model.overduePeriod.replace(/M|\+/, '')
    this.homePageService.actionCodeMonitor(overduePeriod).subscribe(
      data => {
        // console.log(data,"admin")
        const rows: any[] = []
        for (const item of this.initDataRows) {
          // console.log(item,"item")
          rows.push({
            actionName: item.actionName,
            actionCode: item.actionCode,
            codeNum: data[item.actionCode] || item.codeNum
          })
        }
        this.caseRecordChart.data.rows = rows
        // console.log(this.caseRecordChart.data.rows,"this.caseRecordChart.data.rows")
      }
    )
  }

  private mounted() {
    this.updateData()
  }
}
</script>

<style lang="less" scoped>
</style>
